/**
 * @Author: ZFEason
 * @Date: 2023-07-11 14:00:01
 * @LastEditors: ZFEason
 * @LastEditTime: 2023-07-20 10:41:36
 * @FilePath: /ift-economy-network-h5/src/pages/storage-situation/index.tsx
 * @Description:
 */

import { getStorageList } from "@/service/storage-situation";
import { getStorage, storageKey } from "@/utils/storageUtils";
import { Button, InfiniteScroll, List, SearchBar, Toast } from "antd-mobile";
import dayjs from "dayjs";
import { debounce } from "lodash-es";
import { BaseSyntheticEvent, useEffect, useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import Styles from "./index.module.less";

type list = {
  page: number;
  pageSize: number;
  total: number;
  list: any[];
  moreLoading: boolean;
};

const Index: React.FC<any> = () => {
  const navigate = useNavigate();
  const [search] = useSearchParams();

  const [value, setValue] = useState("");
  const [statistics, setStatistics] = useState([
    { num: 0, unit: "个", des: "挖掘项目个数" },
    { num: 0, unit: "万元", des: "预计总投资额" },
    { num: 0, unit: "万元", des: "2023年预计纳统额" },
  ]);
  //   {
  //     projectNum: 0,
  //     investmentAmount: 0,
  //     paymentAmount: 0,
  //   }

  const [searchList, setSearchList] = useState<list>({
    page: 1,
    pageSize: 1,
    total: 0,
    list: [
      {
        name: "哈哈哈",
        time: "2023-06-30",
        enterprise: "深圳市XXXXXXXXX有限公司",
      },
      {
        name: "哈哈哈1",
        time: "2023-06-31",
        enterprise: "深圳市XXXXXXXXX有限公司1",
      },
      {
        name: "哈哈哈",
        time: "2023-06-30",
        enterprise: "深圳市XXXXXXXXX有限公司",
      },
      {
        name: "哈哈哈1",
        time: "2023-06-31",
        enterprise: "深圳市XXXXXXXXX有限公司1",
      },
      {
        name: "哈哈哈",
        time: "2023-06-30",
        enterprise: "深圳市XXXXXXXXX有限公司",
      },
      {
        name: "哈哈哈1",
        time: "2023-06-31",
        enterprise: "深圳市XXXXXXXXX有限公司1",
      },
    ],
    moreLoading: false,
  });

  // 点击搜索查询事件
  const handleSearch = debounce(async () => {
    if (!value.length) {
      Toast.show("请输入项目名称关键字");
      return;
    }
    setSearchList((state) => {
      state.page = 1;
      return { ...state };
    });
    getList();
  }, 300);

  // 获取list
  const getList = async () => {
    const res = await getStorageList({
      pageQuery: {
        pageNum: searchList.page, // 页码
        pageSize: searchList.pageSize,
      },
      keyword: value,
      statDate: dayjs().format("YYYY-MM-DD"),
    });
    console.log("=====->", res);

    const list = res?.data?.list ?? [];
    const { total } = res?.data ?? {};
    setSearchList((state) => {
      state.list = list;
      state.total = total;
      state.moreLoading =
        searchList.page < Math.ceil(total / searchList.pageSize);
      return { ...state };
    });
    setStatistics((state) => {
      state[0].num = res?.data?.predictTotalInvest;
      state[1].num = res?.data?.predictTotalInvest;
      state[2].num = res?.data?.predictTotalInvest;
      return { ...state };
    });
  };

  // 点击跳转详情
  const navigator = (e: BaseSyntheticEvent) => {
    const id = e.currentTarget.getAttribute("data-storage-id");
    console.log("id--", id, e.currentTarget, e.target);

    navigate(`/project-detail?id=${id}`);
  };

  // 加载更多
  const loadMore = async () => {
    setSearchList((state) => {
      state.page = state.page + 1;
      return { ...state };
    });
    getList();
  };

  const addProject = () => {
    navigate("/add-project");
  };

  useEffect(() => {
    // getList();
  }, []);

  return (
    <div className={Styles.storage_container}>
      <div className={Styles.search_container}>
        <SearchBar
          placeholder="请输入企业投资方/项目名称关键词"
          showCancelButton={true}
          cancelText="查询"
          clearOnCancel={false}
          onCancel={handleSearch}
          onChange={setValue}
        />
      </div>

      <div className={Styles.statistics_container}>
        {statistics.map((item, i) => {
          return (
            <div key={i} className={Styles.statistics_item}>
              <p className={Styles.num}>
                {item.num}
                {item.unit}
              </p>
              <p className={Styles.des}>{item.des}</p>
            </div>
          );
        })}
      </div>

      <List className={Styles.content}>
        {searchList.list.map((item, i) => (
          <div
            key={i}
            className={Styles.content_item}
            onClick={navigator}
            data-storage-id={"1021201"}
          >
            <p className={Styles.title}>{item?.projectName}</p>
            <p className={Styles.detail}>走访时间：{item?.visitTime}</p>
            <p className={Styles.detail}>走访企业：{item?.companyName}</p>
            <div className={Styles.statistics_data}>
              {[
                {
                  data: `${item?.predictTotalInvest ?? ""}万元`,
                  des: "预计总投资额",
                },
                {
                  data: `${item?.yearPredictInvest ?? ""}万元`,
                  des: "2023年预计纳统额",
                },
                { data: item.predictTime, des: "计划入库时间" },
              ].map((item, i) => {
                return (
                  <div key={i} className={Styles.statistics_data_item}>
                    <p className={Styles.num}>{item.data}</p>
                    <p className={Styles.des}>{item.des}</p>
                  </div>
                );
              })}
            </div>
          </div>
        ))}
      </List>
      <InfiniteScroll loadMore={loadMore} hasMore={searchList.moreLoading} />
      <div className={Styles.bottom_container}>
        <Button block color="primary" fill="solid" onClick={addProject}>
          新增挖掘项目
        </Button>
      </div>
    </div>
  );
};
export default Index;
